<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>nReceipts: Create Receipt</title>
<%@ include file="../common/tagincludes.jsp"%>
<%@ include file="../common/resourceincludes.jsp"%>


<link rel="stylesheet" href="resources/css/receiptsupload.css">
<link rel="stylesheet" href="resources/css/jqgrid/ui.jqgrid.css">

<script type="text/javascript">
	function allowDrop(ev) {
		ev.preventDefault();
	}

	function drag(ev) {
		ev.dataTransfer.setData("Text", ev.target.id);
	}

	function drop(ev) {

		var files = ev.dataTransfer.files;
		var files = ev.target.files;

		var data = ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));

		ev.preventDefault();
	}
</script>
</head>
<body>
	<table width="100%">
		<tr>
			<td width="65%" align="justify" valign="top">
				<div id="createreceipt">
					<sf:form id="receiptheaderForm" name="receiptheaderForm" method="POST" modelAttribute="receipt">
						<table>
							<tr>
								<td>Name <sf:input type="text" name="receiptname" path="name" placeholder="enter receipt name" required="true" /> 
								</td>
								<td>Date <sf:input type="text" id="receiptdate"  placeholder="select receipt date" path="receiptDate" required="true" />
								</td>
							</tr>
							<tr>
								<td>Retailer<sf:input type="text" id="retailer" path="retailer.value"  required="true"  placeholder="enter/select retailer" />
								<td>Category<sf:input type="text" id="receiptcategory" path="receiptCategory.value" placeholder="enter/select receipt category" required="true" />
									</td>
							</tr>
							<tr>
								<td colspan=2 align="center"><input type="submit"
									value="Save"> </input><input type="reset" value="Reset">
									</input></td>
							</tr>
						</table>
						<sf:hidden id="receiptId" name="receiptId" path="id"  />
						<sf:hidden id="receiptUploadId" name="receiptUpload.id" path="receiptUpload.id"  />
					</sf:form>

					<br>
					<div id="receiptDetailsView">
						<table id="crudReceiptDetailsTable" width="40%">
						</table>
						<div id="receiptItemPager"></div>
					</div>

				</div></td>
			<td width="15%">
				<div id="billpreview">Preview Bill</div>
			</td>
			<td width="20%">
				<div id="simplefileupload">

					<form id="receiptUploadForm" name="receiptUploadForm"
						enctype="multipart/form-data" action="recUpload/uploadReceiptImage"
						method="post">


						<div id="drop_zone">
							Drop your Image files here
							<output id="list"></output>
							<div class="preview done">

								<span class="imageHolder"> <img src="" /> <span
									class="uploaded"></span> </span>

								<div class="progressHolder">
									<div class="progress"></div>

								</div>
							</div>
						</div>
						<div id="receiptView">

							<table id="viewReceiptUploadedTable" width="10%">
							</table>
							<div id="pager"></div>
						</div>
						<!--
						<button type="submit" id="butUploadReceiptImage">Upload</button>

					-->
					</form>

				</div>
			</td>
		</tr>
	</table>

	<script type="text/javascript" src="jquery/jquery.filedrop.js"></script>
	<script type="text/javascript" src="app/receipts/receiptsedit.js"></script>
	<script type="text/javascript" src="app/receipts/receiptitemsedit.js"></script>
	<script type="text/javascript">
		application.showHeading("Create/Upload receipts");
		//document.getElementById('files').addEventListener('change', handleFileSelect, false);
	</script>

	<script>
		function handleFileSelect(evt) {
			evt.stopPropagation();
			evt.preventDefault();

			var files = evt.dataTransfer.files; // FileList object.
			//alert('files: ' + files);

			// files is a FileList of File objects. List some properties.
			var output = [];
			for ( var i = 0, f; f = files[i]; i++) {
				// Only process image files.
				if (!f.type.match('image.*')) {
					continue;
				}

				var reader = new FileReader();

				// Closure to capture the file information.
				reader.onload = (function(theFile) {
					return function(e) {
						// Render thumbnail.
						var span = document.createElement('span');
						span.innerHTML = [
								'<img height=100, width=100, class="thumb" src="',
								e.target.result, '" title="',
								escape(theFile.name), '"/>' ].join('');
						document.getElementById('list')
								.insertBefore(span, null);
						uploadFile(theFile);
					};
				})(f);

				// Read in the image file as a data URL.
				reader.readAsDataURL(f);
			}
			document.getElementById('list').innerHTML = '<ul>'
					+ output.join('') + '</ul>';
		}

		function uploadFile(fileToBeUploaded) {
			var fd = new FormData();
			fd.append("receiptImage", fileToBeUploaded);
			var xhr = new XMLHttpRequest();
			xhr.upload.addEventListener("progress", uploadProgress, false);
			xhr.addEventListener("load", uploadComplete, false);
			xhr.addEventListener("error", uploadFailed, false);
			xhr.addEventListener("abort", uploadCanceled, false);
			xhr.open("POST", "recUpload/uploadReceiptImage");
			xhr.send(fd);
		}
		function uploadProgress(evt) {
		}

		function uploadComplete(evt) {
			/* This event is raised when the server send back a response */
			$("#viewReceiptUploadedTable").trigger("reloadGrid");
		}

		function uploadFailed(evt) {
			//alert("uploadFailed : There was an error attempting to upload the file.");
		}

		function uploadCanceled(evt) {
			alert("uploadCanceled : The upload has been canceled by the user or the browser dropped the connection.");
		}

		function handleDragOver(evt) {
			evt.stopPropagation();
			evt.preventDefault();
			evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
		}

		// Setup the dnd listeners.
		var dropZone = document.getElementById('drop_zone');
		dropZone.addEventListener('dragover', handleDragOver, false);
		dropZone.addEventListener('drop', handleFileSelect, false);
	</script>
</body>

</html>